<style scoped>
    .home-root-box{
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        padding:.4rem 0 .73rem .45rem;
        overflow: hidden;
        background: #f5f4f4;
    }
    .hone-list{
        width: 10000%;
        transition: all 0.5s;
    }
    .home-item{
        float: left;
        width: 11.9rem;
        height: 8.8rem;
        margin-right: .85rem;

    }
    .home-item-img{
        width: 100%;
        height: 7.7rem;
        overflow: hidden;
        position: relative;
        border-radius:.08rem;
    }
    .home-item-img img{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100.5%;
        transform: translate(-50%,-50%);
    }
    .home-item-title{
        margin-top: .3rem;
        line-height: .4rem;
        font-weight: bold;
        color:#666;
        font-size: .18rem;
    }
    .home-item-text{
        line-height: .25rem;
        color:#6c6c6c;
    }
</style>
<template>
<div class="home-root-box">
<div class="hone-list clear" >
    <div class="home-item" v-for="(item,index) in rootData.photoList"
         :key="index">
        <div class="home-item-img" :style="'box-shadow:0 0 0.2rem '+boxShadowList[index]">
            <img :src="item.img" alt="" class="home-img">
        </div>
        <div class="home-item-title" v-html="item.title"></div>
        <div class="home-item-text" v-html="item.text"></div>
    </div>
    <div id="css_code"></div>
</div>
</div>
</template>

<script>
    import Vue from 'vue'
    import rootData from '../assets/js/dataConfig'
    rootData.coverFlag=true
    export default {
        name: "Home",
        data() {
            return {
                rootData: rootData.home,
                boxShadowList:[],
                scale:0,
                wheelFlag:false,
                wheelTimer:null
            }
        },
        mounted() {
            let imgs = document.getElementsByClassName('home-img')
            for(let i=0;i<imgs.length;i++){
                let ele=imgs[i]
                this.ImageToCanvas(ele,i)
            }
            window.onmousewheel = document.onmousewheel = this.wheel;
            rootData.coverFlag=false
        },
        methods:{
            //图片转Canvas
            ImageToCanvas(image,i) {
                var canvas = document.createElement("canvas");
                let context=canvas.getContext('2d')
                canvas.width = 1189;
                canvas.height = 770;
                let img=new Image()
                img.src=image.getAttribute('src')
                img.crossOrigin='Anonymous'
                let imageData=null
                let that=this
                let color=''
                image.onload = function (){
                    context.drawImage(image,0,0,this.width,this.height);
                    imageData = context.getImageData(that.random(0,this.width),that.random(0,this.height),1,1).data;
                    color = '#'+ that.hexadecimal(imageData[0]) + that.hexadecimal(imageData[1]) + that.hexadecimal(imageData[2])
                    Vue.set(that.boxShadowList,i,color)
                }
            },
            //转16进制
            hexadecimal(num){
                var r = parseInt(num).toString(16);
                if (r.length == 1) {
                    return '0' + r;
                }
                return r.toUpperCase();
            },
            random:(min,max)=>Math.ceil((max-min)*Math.random()+min),
            //滚轮
            wheel(event){
                clearTimeout(this.wheelTimer)
                let delta = event.wheelDelta/4
                this.scale+=delta
                setTimeout( ()=>{
                    this.checkWheel()
                },100)
            },
            //监测滚动是否过多
            checkWheel(){
                let ele=document.querySelector('.home-item')
                let margin=document.defaultView.getComputedStyle(ele,null)['marginRight']
                let eleWidth=ele.clientWidth
                let width=eleWidth+parseInt(margin.split('px')[0])
				//console.log(this.scale)
                if(this.scale>0){
                    this.scale=0
                }
                else if(this.scale<-(width*(this.rootData.photoList.length-1)-parseInt(document.getElementsByClassName('home-item-img')[0].offsetWidth/3))){
                    this.scale=-(width*(this.rootData.photoList.length-1)-document.getElementsByClassName('home-item-img')[0].offsetWidth/3)
                }
                document.querySelector('.hone-list').style.transform='translateX('+this.scale+'px)'
            }
        }
    }

</script>

